<!--
 * @Description: 
 * @Version: 
 * @Autor: kkz <keke.zhang@seaboxdata.com>
 * @Date: 2024-03-27 14:57:42
 * @LastEditors: kkz
 * @LastEditTime: 2024-03-27 15:17:48
-->
<script setup>
import { ref } from 'vue'
import MonthCom from '@/views/work/component/month.vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'
import { showToast } from '@nutui/nutui'
import dayjs from 'dayjs'
import { useLoginUserStore } from '@/stores'
import { storeToRefs } from 'pinia'
const { loginUserInfo } = storeToRefs(useLoginUserStore())
const router = useRouter()
//返回上一级
const onBackClick = () => {
  router.go(-1)
}
//整个用于提交的form数据对象
const form = ref()
const formModel = ref({
  passwordY: '',
  password: '',
  passwordEntry: ''
})
const rules = ref({
  passwordY: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是 6-15位 的非空字符',
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是 6-15位 的非空字符',
      trigger: 'blur'
    }
  ],
  passwordEntry: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是 6-15位 的非空字符',
      trigger: 'blur'
    },
    {
      validator: (rule, value, callback) => {
        // 判断 value 和当前 form 中收集的password 是否一致
        if (value !== formModel.value.password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback() //就算成功也要 callback
        }
      },
      trigger: 'blur'
    }
  ]
})
//接收日期组件数据方法
const getWorkList = () => {
  request({
    url: '/employee/changePwd',
    method: 'post',
    data: {
      confirmNewPassword: formModel.value.passwordEntry,
      newPassword: formModel.value.password,
      oldPassword: formModel.value.passwordY,
      userId: loginUserInfo.value.id
    }
  }).then((res) => {
    if (res.code == 0) {
      showToast.success('修改成功')
      setTimeout(() => {
        router.push('/')
      }, 1000)
    }
  })
}
</script>
<template>
  <div class="user_homepage">
    <nut-navbar class="homepage_navbar" left-show @click-back="onBackClick">
      <template #left>
        <div>修改密码</div>
      </template>
    </nut-navbar>
    <el-form
      class="loginFrom"
      :model="formModel"
      :rules="rules"
      ref="form"
      size="large"
      autocomplete="off"
    >
      <el-form-item :label="'原密码'" :label-width="100" prop="passwordY">
        <el-input
          class="input2"
          v-model="formModel.passwordY"
          type="password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item :label="'新密码'" :label-width="100" prop="password">
        <el-input
          class="input2"
          v-model="formModel.password"
          type="password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item :label="'确认新密码'" :label-width="100" prop="passwordEntry">
        <el-input
          class="input2"
          v-model="formModel.passwordEntry"
          type="password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-button
      class="login_btn"
      type="primary"
      @click="
        form.validate((valid) => {
          if (valid) {
            getWorkList()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      "
      >提交</el-button
    >
  </div>
</template>
<style lang="scss" scoped>
.user_homepage {
  display: flex;
  flex-direction: column;
  align-items: center;
  .loginFrom {
    margin-top: 5px;
    width: 90%;
  }
}
</style>
